<!-- 机台-当前状态 -->
<template>
  <div class="container-app">
    <div class="row">
      <div class="q-ml-md">
        <div>站点</div>
        <div class="row">
          <q-select
            dense
            square
            outlined
            v-model="type"
            class="q-mt-sm"
            style="width: 250px"
            :options="option"
          >
          </q-select>
          <q-select
            dense
            square
            outlined
            v-model="type2"
            class="q-mt-sm q-ml-xs"
            style="width: 250px"
            :options="option"
          >
          </q-select>
        </div>
      </div>
      <q-space />
      <div class="divBtn" style="background: #00cc00">非常整洁</div>
      <div class="divBtn" style="background: #00c0ef">轻度整洁</div>
      <div class="divBtn" style="background: #999999">较严重</div>
      <div class="divBtn" style="background: #333333">严重</div>
    </div>
    <div class="row justify-between">
      <div
        v-for="item in 30"
        :key="item"
        class="con q-ml-md q-mt-sm"
        :style="{ background: color(item) }"
      >
        DZ{{ item }}
      </div>
    </div>
    <div class="q-mt-lg">
      <div class="row">
        <q-space />
        <q-select
          dense
          outlined
          v-model="type3"
          class="q-ml-md"
          bg-color="primary"
          color="white"
          style="width: 200px"
          :options="option"
        >
        </q-select>
      </div>
      <div
        id="lineChart"
        class="test-wrepper"
        :style="[{ width: '100%' }, { height: 600 + 'px' }]"
      ></div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import resize from "src/components/mixins/resize.js";

let chart = null,
  chart2;
export default defineComponent({
  mixins: [resize],
  name: "ceshi1",
  components: {},
  data() {
    return {
      defaultOption: null,
      type: "CYD2023135674",
      type2: "中国-北京-海淀 金隅智造工厂",
      type3: "2023-05",
      option: [2019, 2021, 2022, 2023],
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    color(val) {
      if (val == 1 || val == 8 || val == 9) {
        return "#00C0EF";
      } else if (val == 3 || val == 18 || val == 20) {
        return "#333333";
      } else {
        return "#999999";
      }
    },
    // 初始化echarts实例
    initEcharts(chart, chart2) {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      chart = echarts.init(document.getElementById("lineChart"));
      chart.clear(); // 因为清空了echarts的数据，所以再次渲染
      chart.setOption(this.handlerDefaultOption(), true);
      this.chart = chart;
    },
    // 处理echarts配置项
    handlerDefaultOption() {
      this.defaultOption = {
        title: {
          text: "发电情况分析",
          left: "50%",
          textStyle: {
            color: "#333",
            fontSize: 18,
          },
        },
        tooltip: {},
        grid: {
          left: "5%",
          right: "5%",
        },
        xAxis: {
          data: ["m1", "m2", "m3", "m4", "m5", "m6"],
        },
        yAxis: {
          name: "发电量（KWh）",
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5123, 2012, 3644, 1023, 120, 2410],
            itemStyle: {
              color: "#53D42C",
            },
          },
        ],
      };

      return this.defaultOption;
    },
  },
});
</script>

<style lang="scss" scoped>
.divBtn {
  width: 90px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: white;
  border-radius: 4px;
  margin-right: 10px;
}
.con {
  width: 90px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: white;
  border-radius: 4px;
}
</style>
